<template>
    <div class="login-container">
        <div
            :style="{ '--bg-color': bgColor, '--bg-direct': bgDirect }"
            class="background"
        ></div>
        <div class="login-form">
            <el-card class="login-form-card">
                <template #header>
                    <div class="title">LOGIN</div>
                </template>
                <el-form :model="loginInfo" :rules="rules">
                    <el-form-item label="账号" prop="account">
                        <el-input
                            v-model="loginInfo.account"
                            
                            placeholder="请输入账号"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input
                            v-model="loginInfo.password"
                            type="password"
                            placeholder="请输入密码"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            :loading="btnLoading"
                            type="primary"
                            @click="login"
                            >登录</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
        <footer>
            <div>
                Powered By <a href="//shimmer.neusoft.edu.cn">微光网络工作室</a>
            </div>
        </footer>
    </div>
</template>

<script lang="ts">
import { AuthRole } from "@/headers/admin/auth.h";
import { useAdminStore } from "@/store/admin";
import { GetUserActorRoleAction, LoginAction } from "@/store/admin/action";
import { Vue, Options } from "vue-class-component";
import { ElMessage } from "element-plus";
import { AxiosError } from "axios";
import animeJS from "animejs";
import { onUnmounted, ref, Ref } from "vue";
import { RouterName } from "@/router/admin";
@Options({
    name: "Login",
})
export default class LoginPage extends Vue {
    loginInfo = {
        account: "",
        password: "",
    };
    rules = {
        account:[
            {
                required:true,
                message:"请输入账号",
                trigger:'blur'
            }
        ],
        password:[
            {
                required:true,
                message:"请输入密码",
                trigger:'blur'
            }
        ]
    }

    store = useAdminStore();
    bgColor = "rgb(11,166,221)";
    bgDirect = "45deg";
    redirect = "";
    btnLoading = false;
    async login() {
        this.btnLoading = true;
        try {
            const userInfo = await  LoginAction.getInstance().call(
                this.store,
                this.loginInfo
            );
            if (!userInfo) {
                ElMessage.error({
                    message: "用户不存在，请检查账号",
                    type: "error",
                });
                return;
            }
            const role = await GetUserActorRoleAction.getInstance().call(this.store);
            if (!(role & (AuthRole.Leader | AuthRole.Admin))) {
                ElMessage.error({
                    message: "登录失败，您的权限不满足",
                    type: "error",
                });
            }
            ElMessage.success({
                message: `登录成功，欢迎您${userInfo.nickname}`,
                type: "success",
            });
            if (this.redirect) {
                this.$router.push({
                    path: this.redirect,
                });
            }else {
                this.$router.push({
                    name:RouterName.Dashboard
                })
            }
        } catch (e) {
            const axiosError: AxiosError = e;
            if (
                axiosError.response?.status === 404 ||
                axiosError.response?.status === 403
            ) {
                ElMessage.error({
                    message: "用户名密码错误",
                    type: "error",
                });
                return;
            }
            console.log(e);
            ElMessage.error({
                message: "网络错误，请稍后重试",
                type: "error",
            });
        } finally {
            this.btnLoading = false;
        }
    }
    mounted() {
        this.redirect = Array(this.$route.query?.['redirect'] ?? this.$route.params["redirect"]).flat().join();
        useBackgroundAnime(this);
    }
}
function useBackgroundAnime(target: any) {
    animeJS({
        targets: target,
        loop: true,
        duration: 10000,
        direction: "alternate",
        bgColor: [
            {
                value: "rgb(173 83 124)",
            },
            {
                value: "rgb(230 157 48)",
            },
        ],
        easing: "linear",
        autoplay: true,
    });
    animeJS({
        targets: target,
        loop: true,
        duration: 10000,
        direction: "normal",
        bgDirect: [
            {
                direction: "normal",
                value: "+=360deg",
            },
        ],
        easing: "linear",
        autoplay: true,
    });
    onUnmounted(() => {
        animeJS.remove(target);
        console.log("remove");
    });
    return {
        removeAnime() {
            animeJS.remove(target);
        },
    };
}
</script>

<style lang="scss" scoped>
.login-container {
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .login-form {
        width: 100%;
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: flex-end;

        .login-form-card {
            min-width: 350px;
            @media (max-width: 380px) {
                min-width: 80%;
            }
            .title {
                color: rgba($color: #000000, $alpha: 0.6);
                font-size: 24px;
                font-weight: bold;
                letter-spacing: 0.15em;
            }
            background: #ffffffb8;
            border: 1px solid #ebeef573;
            :deep(.el-card__header) {
                border-bottom: 1px solid #ebeef5b8;
            }
        }
    }
    .background {
        --bg-color: #0da6dd;
        --bg-direct: 45deg;
        position: fixed;
        z-index: -1;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(
            var(--bg-direct),
            var(--bg-color),
            transparent
        );
    }
    footer {
        display: flex;
        flex-basis: 1;
        flex-grow: 1;
        height: 100%;
        flex-direction: column;
        justify-content: flex-end;
        color: rgba($color: #000000, $alpha: 0.4);
        font-size: 16px;
        font-weight: bold;
        > div {
            margin-bottom: 10px;
        }
        a {
            color: rgba($color: #000000, $alpha: 0.4);
            font-size: 16px;
            font-weight: bold;
            transition: 0.2s ease-in-out;
            &:hover {
                color: rgba($color: #000000, $alpha: 0.6);
            }
        }
    }
}
</style>